<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="dd">
        <ul class="ul1">
            <li class="li1">这是标题 
               
            </li> 
    
            <li>这是分类
                    <div class="div1">
                        <dl>  
                            <dt><img src="images/1.jpg" alt=""></dt>
                            <dd>这是风景</dd>
                        </dl>
                        <dl>  
                            <dt><img src="images/1.jpg" alt=""></dt>
                            <dd>这是风景</dd>
                        </dl>
                        <dl>  
                            <dt><img src="images/1.jpg" alt=""></dt>
                            <dd>这是风景</dd>
                        </dl>
                        <dl>  
                            <dt><img src="images/1.jpg" alt=""></dt>
                            <dd>这是风景</dd>
                        </dl>
                        <dl>  
                            <dt><img src="images/1.jpg" alt=""></dt>
                            <dd>这是风景</dd>
                        </dl>
                        <dl>  
                             <dt><img src="images/1.jpg" alt=""></dt>
                             <dd>这是风景</dd>
                         </dl>
                    </div>
                
            </li>
            <li>这是分类
                <div class="div1">
                    <dl>  
                        <dt><img src="images/2.jpg" alt=""></dt>
                        <dd>这是风景</dd>
                    </dl>
                    <dl>  
                        <dt><img src="images/2.jpg" alt=""></dt>
                        <dd>这是风景</dd>
                    </dl>
                    <dl>  
                        <dt><img src="images/2.jpg" alt=""></dt>
                        <dd>这是风景</dd>
                    </dl>
                    <dl>  
                        <dt><img src="images/2.jpg" alt=""></dt>
                        <dd>这是风景</dd>
                    </dl>
                    <dl>  
                        <dt><img src="images/2.jpg" alt=""></dt>
                        <dd>这是风景</dd>
                    </dl>
                    <dl>  
                         <dt><img src="images/2.jpg" alt=""></dt>
                         <dd>这是风景</dd>
                     </dl>
                </div>
            </li>
            <li>这是分类
                <div class="div1">
                    <dl>  
                        <dt><img src="images/3.jpg" alt=""></dt>
                        <dd>这是风景</dd>
                    </dl>
                    <dl>  
                        <dt><img src="images/3.jpg" alt=""></dt>
                        <dd>这是风景</dd>
                    </dl>
                    <dl>  
                        <dt><img src="images/3.jpg" alt=""></dt>
                        <dd>这是风景</dd>
                    </dl>
                    <dl>  
                        <dt><img src="images/3.jpg" alt=""></dt>
                        <dd>这是风景</dd>
                    </dl>
                    <dl>  
                        <dt><img src="images/3.jpg" alt=""></dt>
                        <dd>这是风景</dd>
                    </dl>
                    <dl>  
                         <dt><img src="images/3.jpg" alt=""></dt>
                         <dd>这是风景</dd>
                     </dl>
                </div>
            </li>
            <li>这是分类
                <div class="div1">
                    <dl>  
                        <dt><img src="images/4.jpg" alt=""></dt>
                        <dd>这是风景</dd>
                    </dl>
                    <dl>  
                        <dt><img src="images/4.jpg" alt=""></dt>
                        <dd>这是风景</dd>
                    </dl>
                    <dl>  
                        <dt><img src="images/4.jpg" alt=""></dt>
                        <dd>这是风景</dd>
                    </dl>
                    <dl>  
                        <dt><img src="images/4.jpg" alt=""></dt>
                        <dd>这是风景</dd>
                    </dl>
                    <dl>  
                        <dt><img src="images/4.jpg" alt=""></dt>
                        <dd>这是风景</dd>
                    </dl>
                    <dl>  
                         <dt><img src="images/4.jpg" alt=""></dt>
                         <dd>这是风景</dd>
                     </dl>
                </div>
            </li>
            <li>这是分类
                <div class="div1">
                    <dl>  
                        <dt><img src="images/5.jpg" alt=""></dt>
                        <dd>这是风景</dd>
                    </dl>
                    <dl>  
                        <dt><img src="images/5.jpg" alt=""></dt>
                        <dd>这是风景</dd>
                    </dl>
                    <dl>  
                        <dt><img src="images/5.jpg" alt=""></dt>
                        <dd>这是风景</dd>
                    </dl>
                    <dl>  
                        <dt><img src="images/5.jpg" alt=""></dt>
                        <dd>这是风景</dd>
                    </dl>
                    <dl>  
                        <dt><img src="images/5.jpg" alt=""></dt>
                        <dd>这是风景</dd>
                    </dl>
                    <dl>  
                         <dt><img src="images/5.jpg" alt=""></dt>
                         <dd>这是风景</dd>
                     </dl>
                </div>
            </li>
        </ul>
    </div>
    
   
 
    
    <style>
        *
        {
            list-style: none;
            margin: 0;padding: 0;
            text-decoration: none;
        }
        .ul1{
            width: 200px;
            height: 400px;
            line-height: 50px;
            float: left;
            font-size: 20px;
            text-align: center;
            background-color: rgba(235, 230, 230, 0.6);
            position: relative;
        }
        .li1{
            font-size: 25px;
            text-align: center;
        }
        .li1:hover{
            background-color: rgb(127, 169, 211);
            color: rgb(255, 255, 255);
        }
        .ul1 li:hover{
            background-color: rgb(127, 169, 211);
            color: blue;
            
        }
       
        img{
            width: 180px;
           
        }
        .div1{
            width: 600px;
            height: 400px;
            position: absolute;
            border: 1px solid #9999;
            left: 200px;
            top: 0;
            margin: auto;
            display: none;
        }
        .div1 dl{
            float: left;
            width: 180px;
            margin: 10px;
        }
        .div dl dd{
            color: black;
            clear: both;
            text-align: center;
        }
       .ul1 li:hover .div1{
            
                display:block;
            
        }
    </style>
</body>
<script>
      
</script>
</html>